<template>
  <vab-dialog v-model="dialogFormVisible" append-to-body :title="title" width="1280px" @close="close">
    <el-form ref="formRef" label-width="130px" :model="form" :rules="rules">
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名" prop="name">
            <el-input v-model.trim="form.name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工号" prop="work_number">
            <el-input v-model.trim="form.work_number" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="花名" prop="alias">
            <el-input v-model.trim="form.alias" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" class="m-2" clearable placeholder="请选择性别" style="width: 240px">
              <el-option label="男" value="0" />
              <el-option label="女" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生日" prop="birthday">
            <el-date-picker v-model="form.birthday" placeholder="请选择生日" type="date" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="分公司" prop="uniacid">
            <el-select v-model="form.uniacid" class="m-2" clearable placeholder="请选择职位" style="width: 240px">
              <el-option v-for="item in saas_list" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="部门" prop="department_id">
            <el-select v-model="form.department_id" class="m-2" clearable placeholder="请选择部门" style="width: 240px">
              <el-option v-for="depart_item in department_list" :key="depart_item.id" :label="depart_item.name" :value="depart_item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="职位" prop="position_id">
            <el-select v-model="form.position_id" class="m-2" clearable placeholder="请选择职位" style="width: 240px">
              <el-option v-for="item in position_list" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="家庭住址" prop="address">
            <el-input v-model="form.address" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话" prop="phone">
            <el-input v-model="form.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入职时间" prop="in_date">
            <el-date-picker v-model="form.in_date" placeholder="请选择入职时间" type="date" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="实习结束时间" prop="internship_end_date">
            <el-date-picker v-model="form.internship_end_date" placeholder="请选择实习结束时间" type="date" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开工资方式及账号" prop="wages">
            <el-input v-model="form.wages" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="密码" prop="password">
            <el-input v-model.trim="form.password" clearable />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" class="m-2" clearable placeholder="请选择状态" style="width: 240px">
              <el-option
                v-for="(status_item, status_index) in status_list"
                :key="status_index"
                :label="status_item"
                :value="status_index"
              />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" :rows="3" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="info" @click="close">取消</el-button>
      <el-button :disabled="isLoading" type="primary" @click="save">保存</el-button>
    </template>
  </vab-dialog>
</template>

<script lang="ts" setup>
import { api_save } from '/@/api/obj'

defineOptions({
  name: 'SystemAccountEdit',
})

const emit = defineEmits(['fetch-data'])
const $baseMessage = inject<any>('$baseMessage')
const formRef = ref<any>(null)
const title = ref<string>('')
const dialogFormVisible = ref<boolean>(false)
const tablename = 'account'
const isLoading = ref(false)
const form = reactive<any>({
  name: '',
  position_id: '',
  username: '',
  password: '',
})

// const options = ref<any>([
//   { value: 'published', label: 'published' },
//   { value: 'draft', label: 'draft' },
//   { value: 'deleted', label: 'deleted' },
// ])

//自定义提交
const rules = reactive<any>({
  name: [{ required: true, trigger: 'blur', message: '请输入姓名' }],
  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
})

//自定义的状态
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const status_list = reactive<any>(['关闭', '开启'])
//自定义的外键 职位
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const position_list = reactive<any>([
  {
    id: '',
    name: '',
  },
])
//自定义的外键 部门
const department_list = reactive<any>([
  {
    id: '',
    name: '',
  },
])

//自定义保存数据
const save = () => {
  isLoading.value = true
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      const { msg }: any = await api_save(tablename, form)
      await $baseMessage(msg, 'success', 'hey')
      await close()
      dialogFormVisible.value = false
      isLoading.value = false
    }
  })
}
//通用显示弹窗
const showEdit = (res: any) => {
  console.log('showEdit', res)
  //外键
  Object.assign(position_list, res.foreign_list.basic_position_T_position_id)
  Object.assign(department_list, res.foreign_list.department_T_department_id)

  dialogFormVisible.value = true
  nextTick(() => {
    if (!res.detail) {
      title.value = '添加'
      Object.assign(form, {
        id: null,
      })
    } else {
      title.value = '编辑'
      //如果该表有状态，则需要讲状态转化为int类型
      if (res.detail.status) {
        res.detail.status = parseInt(res.detail.status)
      }
      Object.assign(form, res.detail)
    }
  })
}
defineExpose({
  showEdit,
})
//通用关闭弹窗
const close = () => {
  formRef.value.clearValidate()
  formRef.value.resetFields()
  dialogFormVisible.value = false
  emit('fetch-data')
}
</script>
<style scoped>
.el-col {
  margin: 5px 0;
}
</style>
